<template>
	
	
	
	<div class="big">
		<el-tabs type="border-card">
		    <el-tab-pane label="收支登记">
				
				<div class="mb16">
							<button class="gjsx" @click="showClick">高级筛选 <img src="../img/高级筛选.png" style="height: 15px;"/></button>
							<div class="ml1">
								<el-input type="text" maxlength="20" placeholder="输入项目名称/房号/费用编号" class="el-input"/>
								<el-button type="primary"  style="height: 40px; background-color: white;color: black; border: none;">搜索</el-button>
							</div>
						</div>
				 <div class="xiala" v-show="showXiala">
						    <form>
								<el-form-item label="所属资产" class="xz">
								      <el-select  placeholder="全部">
								      </el-select>
								</el-form-item>
								<el-form-item label="类型" class="xz">
								      <el-select  placeholder="全部">
								      </el-select>
								</el-form-item>
								<el-form-item label="操作人" class="xz">
								    <el-select  placeholder="全部">
								    </el-select>
								</el-form-item>
				
								<p style="width: 500px; height: 1px;">&nbsp;</p>
								<el-form-item label="操作时间" class="xz" style="width: 800px;">
									<el-form-item>
									      <el-col :span="11">
									        <el-date-picker
									          type="date"
									          placeholder="开始"
									          style="width: 100%"
									        />
									      </el-col>
									      <el-col :span="2" class="text-center">
									        <span class="text-gray-500">至</span>
									      </el-col>
									      <el-col :span="11">
									        <el-date-picker
									          placeholder="结束"
									          style="width: 100%"
									        />
									      </el-col>
									    </el-form-item>
								</el-form-item>

								<el-form-item label="操作方式" class="xz" style="width: 800px;">
								    <el-select  placeholder="全部" style="width: 200px;right: 5px;">
								    </el-select>
								</el-form-item>
								
								<el-form-item label="收支方式" class="xz" style="width: 800px;">
								    <el-select  placeholder="全部" style="width: 200px;right: 5px;">
								    </el-select>
								</el-form-item>
								
								
								<el-form-item label="收支时间" class="xz" style="width: 800px;">
									<el-form-item>
									      <el-col :span="11">
									        <el-date-picker
									          type="date"
									          placeholder="开始"
									          style="width: 100%"
									        />
									      </el-col>
									      <el-col :span="2" class="text-center">
									        <span class="text-gray-500">至</span>
									      </el-col>
									      <el-col :span="11">
									        <el-date-picker
									          placeholder="结束"
									          style="width: 100%"
									        />
									      </el-col>
									    </el-form-item>
										
								</el-form-item>
								
								<el-form-item label="收支类目" class="xz" style="width: 800px;">
								    <el-select  placeholder="全部" style="width: 200px;right: 5px;">
								    </el-select>
								</el-form-item>
								<el-button class="btn1">重置</el-button><el-button class="btn2">查询</el-button>
							</form>
							<br />
						</div>
				<div class="all">
					<br />
					<el-button type="primary" class="add" plain @click="dialogFormVisible2 = true">登记收支</el-button><br /><br />
					
					<el-dialog v-model="dialogFormVisible2" title="添加收支" width="650">
					  <el-form :model="form">
						  
					    
						
					    <el-form-item label="备注" :label-width="formLabelWidth" >
					      <el-select v-model="form.region" placeholder="Please select a zone" class="xialakuang">
					        <el-option label="Zone No.1" value="shanghai" />
					        <el-option label="Zone No.2" value="beijing" />
					      </el-select>
						  <el-select v-model="form.region" placeholder="Please select a zone" class="xialakuang">
						    <el-option label="Zone No.1" value="shanghai" />
						    <el-option label="Zone No.2" value="beijing" />
						  </el-select>
					    </el-form-item>
						
						<el-form-item label="类目名称" :label-width="formLabelWidth">
						  <el-input v-model="form.name" autocomplete="off" class="xialakuang" />
						</el-form-item>
						
						<el-form-item label="备注" :label-width="formLabelWidth">
						  <el-select v-model="form.region" placeholder="Please select a zone" class="xialakuang">
						    <el-option label="Zone No.1" value="shanghai" />
						    <el-option label="Zone No.2" value="beijing" />
						  </el-select>
						</el-form-item>
						
						<el-form-item label="类目名称" :label-width="formLabelWidth">
						  <el-input v-model="form.name" autocomplete="off" class="xialakuang" />
						</el-form-item>
						
						<el-form-item label="备注" :label-width="formLabelWidth">
						  <el-select v-model="form.region" placeholder="Please select a zone" class="xialakuang">
						    <el-option label="Zone No.1" value="shanghai" />
						    <el-option label="Zone No.2" value="beijing" />
						  </el-select>
						</el-form-item>
						
						<el-form-item label="类目名称" :label-width="formLabelWidth">
						  <el-input v-model="form.name" autocomplete="off" class="xialakuang" />
						</el-form-item>
						
						<el-form-item label="类目名称" :label-width="formLabelWidth">
						  <el-input v-model="form.name" autocomplete="off" class="xialakuang" />
						</el-form-item>
						
					  </el-form>
					  <template #footer>
					    <div class="dialog-footer">
					      <el-button @click="dialogFormVisible2 = false" class="tcanniu">取消</el-button>
					      <el-button type="primary" @click="dialogFormVisible2 = false" class="tcanniu">
					        确定
					      </el-button>
					    </div>
					  </template>
					</el-dialog>
					
				  <el-table :data="tableData" style="width: 100%" >
				    <el-table-column type="selection" width="55" />
				    <el-table-column label="Date" width="120">
				      <template #default="scope">{{ scope.row.date }}</template>
				    </el-table-column>
				    <el-table-column property="name" label="Name" width="120" />
				    <el-table-column
				      property="address"
				      label="use show-overflow-tooltip"
				      width="240"
				      show-overflow-tooltip
				    />
				    <el-table-column property="address" label="address" />
				  </el-table>
				</div>
				
				
			</el-tab-pane>
		    <el-tab-pane label="收支类目">
				<div class="feiyongmingxi">

							  
							<button class="gjsx" @click="showClick2">高级筛选 <img src="../img/高级筛选.png" style="height: 15px;"/></button>
							<div class="ml1">
								<el-input type="text" maxlength="20" placeholder="输入项目名称/房号/费用编号" class="el-input"/>
								<el-button type="primary"  style="height: 40px; background-color: white;color: black; border: none;">搜索</el-button>
							</div>
						</div>
				<div class="xiala2" v-show="showXiala2">
										    <form>
												<el-form-item label="操作人" class="xz">
												      <el-select  placeholder="全部">
												      </el-select>
												</el-form-item>

												
												
												<el-form-item label="创建时间" class="xz" style="width: 800px;">
													<el-form-item>
													      <el-col :span="11">
													        <el-date-picker
													          type="date"
													          placeholder="开始"
													          style="width: 100%"
													        />
													      </el-col>
													      <el-col :span="2" class="text-center">
													        <span class="text-gray-500">至</span>
													      </el-col>
													      <el-col :span="11">
													        <el-date-picker
													          placeholder="结束"
													          style="width: 100%"
													        />
													      </el-col>
													    </el-form-item>
														
												</el-form-item>
												<el-button class="btn2-1">重置</el-button><el-button class="btn2-2">查询</el-button>
											</form>
											<br />
										</div>
				<div class="all">
					<br />
					<el-button type="primary" class="add" plain @click="dialogFormVisible = true">添加收支类目</el-button><br /><br />
					  <el-dialog v-model="dialogFormVisible" title="添加类目" width="500">
					    <el-form :model="form">
					      <el-form-item label="类目名称" :label-width="formLabelWidth">
					        <el-input v-model="form.name" autocomplete="off" />
					      </el-form-item>
					      <el-form-item label="备注" :label-width="formLabelWidth">
					        <el-select v-model="form.region" placeholder="Please select a zone">
					          <el-option label="Zone No.1" value="shanghai" />
					          <el-option label="Zone No.2" value="beijing" />
					        </el-select>
					      </el-form-item>
					    </el-form>
					    <template #footer>
					      <div class="dialog-footer">
					        <el-button @click="dialogFormVisible = false" class="tcanniu">取消</el-button>
					        <el-button type="primary" @click="dialogFormVisible = false" class="tcanniu">
					          确定
					        </el-button>
					      </div>
					    </template>
					  </el-dialog>
					  
					  
				  <el-table :data="tableData" style="width: 100%">
				      <el-table-column fixed prop="date" label="Date" width="150" />
				      <el-table-column prop="name" label="Name" width="120" />
				      <el-table-column prop="state" label="State" width="120" />
				      <el-table-column prop="city" label="City" width="120" />
				      <el-table-column prop="address" label="Address" width="600" />
				      <el-table-column prop="zip" label="Zip" width="120" />
				      <el-table-column fixed="right" label="Operations" min-width="120">
				        <template #default>
				          <el-button link type="primary" size="small" @click="handleClick">
				            Detail
				          </el-button>
				          <el-button link type="primary" size="small">Edit</el-button>
				        </template>
				      </el-table-column>
				    </el-table>
				</div>
			</el-tab-pane>
		  </el-tabs>
		<br>
	
	</div>
</template>

<script lang="ts" setup>
	import { ref,reactive } from 'vue'
	import { ElTable } from 'element-plus'
	// import { Search } from '@element-plus/icons-vue'
	
	const loading = ref(true)
	setTimeout(() => {
	  loading.value = false;
	}, 3500);
	
	

	const dialogFormVisible = ref(false)
	const dialogFormVisible2 = ref(false)
	const formLabelWidth = '140px'
	
	const form = reactive({
	  name: '',
	  region: '',
	  date1: '',
	  date2: '',
	  delivery: false,
	  type: [],
	  resource: '',
	  desc: '',
	})
	
const handleClick = () => {
  console.log('click')
}

	
	
	const tableData = [
	  {
	    date: '2016-05-03',
	    name: 'Tom',
	    state: 'California',
	    city: 'Los Angeles',
	    address: 'No. 189, Grove St, Los Angeles',
	    zip: 'CA 90036',
	    tag: 'Home',
	  },
	  {
	    date: '2016-05-02',
	    name: 'Tom',
	    state: 'California',
	    city: 'Los Angeles',
	    address: 'No. 189, Grove St, Los Angeles',
	    zip: 'CA 90036',
	    tag: 'Office',
	  },
	  {
	    date: '2016-05-04',
	    name: 'Tom',
	    state: 'California',
	    city: 'Los Angeles',
	    address: 'No. 189, Grove St, Los Angeles',
	    zip: 'CA 90036',
	    tag: 'Home',
	  },
	  {
	    date: '2016-05-01',
	    name: 'Tom',
	    state: 'California',
	    city: 'Los Angeles',
	    address: 'No. 189, Grove St, Los Angeles',
	    zip: 'CA 90036',
	    tag: 'Office',
	  },
	]
	
	const showXiala = ref(false);
	const showXiala2 = ref(false);
	
	
	const showClick = () => {
	  console.log("aaa");
	  showXiala.value = !showXiala.value;  
	};
	
	const showClick2 = () => {
	  console.log("aaa");
	  showXiala2.value = !showXiala2.value;  
	};
</script>

<style>
	
	.add{
		position: relative;
		right: 600px;
		top: 0px;
		background-color: #00C36D;
		height: 40px;
		width: 100px;
		border: 0px solid;
		color: white;
	}
	.all{
		width: 1370px;
		border: 2px solid gainsboro;
		height: 650px;
		border-radius: 10px; 
		background-color: white;
		
	}
	
	
	
	
	
	.xiala {
			background-color: white;
			width: 1340px;
			height: 420px;
			overflow: auto;
			padding: 15px;
			margin-bottom: 10px;
			border: 2px solid gainsboro;
			border-radius: 10px; 
		}
	.xiala2{
		background-color: white;
		width: 1340px;
		height: 120px;
		overflow: auto;
		padding: 15px;
		margin-bottom: 10px;
		border: 2px solid gainsboro;
		border-radius: 10px; 
	}
		.xz{
			width: 300px;
			float: left;
			margin-bottom: 0;
			margin-right: 32px;
			height: 56px;
			align-items: center;
			text-align: left;
		}
		.text-center{
			text-align: center;
		}
		.btn1{
			position: relative;
			bottom: -330px;
			right:1000px;
			width: 100px;
			height: 40px;
			color: #7e8081;
			background-color: #fafafa;
			border: none;
			font-size: 14px;
			padding: 10px;
		}
		.btn2{
			position: relative;
			bottom: -330px;
			right:980px;
			width: 100px;
			height: 40px;
			color: #fff;
			background-color: #00c36d;
			border-color: #00c36d;
			font-size: 14px;
		}
		.btn2-1{
			position: relative;
			bottom: -70px;
			left: -1100px;
			right:1000px;
			width: 100px;
			height: 40px;
			color: #7e8081;
			background-color: #fafafa;
			border: none;
			font-size: 14px;
			padding: 10px;
		}
		.btn2-2{
			position: relative;
			bottom: -30px;
			right:980px;
			width: 100px;
			height: 40px;
			color: #fff;
			background-color: #00c36d;
			border-color: #00c36d;
			font-size: 14px;
		}
	.gjsx{
			background-color: white;
			padding: 10px 15px;
			color: #00C36D;
			width: 146px;
			height: 40px;
		}
		.mb16{
			margin-bottom: 16px;
			display: -webkit-box;
			display: flex;
			justify-content: flex-end;
			width: 1315px;
		}
		.feiyongmingxi{
			margin-bottom: 16px;
			display: -webkit-box;
			display: flex;
			justify-content: flex-end;
			width: 1315px;
		}
		.ml1{
			width: 300px;
			border: none;
			margin-left: 10px;
			display: inline-table;
		}
		.el-input{
			width: 200px;
		}
		.big{
			background-color: #f5f5f5;
		}
		
		.example-showcase .el-dropdown-link {
		  cursor: pointer;
		  color: var(--el-color-primary);
		  display: flex;
		  align-items: center;
		}
		.example-showcase .el-loading-mask {
		  z-index: 1;
		}
		.tongguo{
			color: #00C36D;
			margin-top: 5px;
		}
		
		.tcanniu{
			background-color: #00c36d;
			color: white;
			width: 100px;
			height: 40px;
		}
		
		.xialakuang{
			width: 350px;
		}
	
</style>